<template>
  <div>
    <tables ref='tables' :columns='columns' v-model='localData'
            @on-selection-change='handleSelect'
            @on-select-cancel='handleSelectCancel'
    >
      <!--      <template v-slot:table-header>-->
      <!--        <Button @click="handleAdd" class="search-btn" type="primary" v-if="isEdit">-->
      <!--          <Icon type="md-person-add" />&nbsp;&nbsp;添加-->
      <!--        </Button>-->
      <!--      </template>-->
    </tables>
    <!--    <Row type="flex" justify="end" align="middle">-->
    <!--      <Col class='ctrls'>-->
    <!--        <Page-->
    <!--          :total="total"-->
    <!--          :current="pageNum"-->
    <!--          :page-size="pageSize"-->
    <!--          :page-size-opts="pageArr"-->
    <!--          show-elevator-->
    <!--          show-sizer-->
    <!--          show-total-->
    <!--          @on-change="onPageChange"-->
    <!--          @on-page-size-change="onPageSizeChange"-->
    <!--        />-->
    <!--      </Col>-->
    <!--    </Row>-->
  </div>
</template>

<script>
import Tables from '_c/tables'

export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Tables
  },
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      pageArr: [10, 20, 30, 50, 100],
      selection: [],
      current: 0,
      localData: []
    }
  },
  watch: {
    tableData(newVal, oldVal) {
      this.localData = newVal
    }
  },
  methods: {
    handleSelect (selection) {
      this.selection = selection
      this.$emit('on-change', selection)
      if (!this.isEdit) {
        setTimeout(() => {
          const tmpData = localStorage.getItem('localData')
          if (typeof tmpData !== 'undefined') {
            this.localData = JSON.parse(tmpData)
          }
          this.$Message.warning('无法修改，请选择权限进行编辑！')
        }, 0)
      }
    },
    handleSelectCancel(selection, row) {
      this.$emit('on-cancel', row)
    },
    onPageChange(page) {
      this.pageNum = page
    },
    onPageSizeChange(size) {
      this.pageSize = size
    }
  }
}
</script>

<style lang="scss" scoped>
.ctrls {
  margin-top: 10px;

  button {
    margin-right: 10px;
  }
}
</style>
